
<!-- <template>
  <div>
    <el-upload class="upload-demo" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :on-preview="handlePreview"
      :on-remove="handleRemove" :limit="3" multiple list-type="picture" :default-file-list="fileList">
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>

    <el-button size="small" type="primary" @click="addImages">添加图片</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="originalFilename" label="图片名称"></el-table-column>
      <el-table-column prop="size" label="图片大小"></el-table-column>
      <el-table-column prop="mimetype" label="图片类型"></el-table-column>
      <el-table-column prop="filepath" label="图片缩略图">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="100">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleRemove(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background :page-size="pageSize" :total="total" :current-page.sync="currentPage"
      @current-change="handleCurrentChange">
    </el-pagination>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 0,
      fileList: [],
      tableData: [],
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  mounted: function () {
    this.handleCurrentChange(1);
  },
  methods: {
    async addImages() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = 'image/*';
      input.multiple = true;
      input.onchange = async (event) => {
        const files = event.target.files;
        let formData = new FormData();

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
          const isLt500k = file.size / 1024 < 500;

          if (isJPG && isLt500k) {
            formData.append('file' + i, file);
          } else {
            this.$message.error('只能上传jpg/png格式的图片,且大小不能超过500KB');
          }
        }

        let response = await this.axios.post('http://localhost:3000/images', formData);
        ///console.log(response);
        if (response.data.code == 200) {
          this.$message.success(response.data.message)
          this.tableData = [response.data.data];
          console.log(this.tableData)
        }

        this.handleCurrentChange(this.currentPage);
      }
      input.click();
    },
    async handleCurrentChange(currentPage) {
      const { data } = await this.axios.get('http://localhost:3000/images', {
        params: {
          page: currentPage,
          limit: this.pageSize
        }
      });

      this.tableData = data;
      this.total = data.pagination.total;
      this.currentPage = data.pagination.page;
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async handleRemove(index) {
      try {
        const response = await this.axios.delete('http://localhost:3000/deleteImage');
        console.log(response.data); // 打印删除成功信息
      } catch (error) {
       console.error(error.message); // 打印删除失败信息
      }
      this.fileList.splice(index, 1);
      this.handleCurrentChange(this.currentPage);
    },
  }
}

</script> --> 
 
<template>
  <div>
      <el-form>
          <el-form-item>
              <el-upload :action="uploadApi" :headers="uploadHeaders" :before-upload="beforeUpload">
                  <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
          </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="size" label="大小"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column label="缩略图" prop="url">
              <template v-slot="{ row }">
                  <img :src="'http://localhost:3000/imgList/' + row.name" alt="" style="max-height: 100px;">
              </template>
          </el-table-column>
          <el-table-column label="操作">
              <template v-slot="{ row }">
                  <el-button type="danger" @click="removeImage(row)">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div class="pagination-container">
          <el-pagination background layout="total, prev, pager, next" :total="total" :page-size.sync="pageSize"
              :current-page.sync="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
      </div>
  </div>
</template>

<script>

export default {
  data() {
      return {
          dialogVisible: false,
          uploadApi: 'http://localhost:3000/upload',
          uploadHeaders: {},
          tableData: [],
          currentPage: 1,
          pageSize: 10,
          total: 0,
          url: ''
      }
  },
  created() {
      // 获取图片列表数据
      this.fetchImageData();
  },

  methods: {
      fetchImageData() {
          this.axios.get('http://localhost:3000/imgList').then(res => {
              console.log(res)
              this.tableData = res.data;
              this.total = this.tableData.length;
          })
      },
      removeImage(row) {
          const imageName = row.name;
          this.axios.post('http://localhost:3000/deleteImage', { fileName: imageName })
          const index = this.tableData.indexOf(row);
          if (index > -1) {
              this.tableData.splice(index, 1);
              this.total -= 1;

              // 删除成功提示
              this.$message({
                  message: `删除成功`,
                  type: 'success',
                  duration: 2000
              });
          } else {
              // 删除失败提示
              this.$message({
                  message: `删除失败`,
                  type: 'warning',
                  duration: 2000
              });
          }
      },
      handleSizeChange(pageSize) {
          this.pageSize = pageSize;
      },

      handleCurrentChange(currentPage) {
          this.currentPage = currentPage;
      },
      beforeUpload(file) {
          // 验证文件类型和大小
          const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';

          if (!isJPG) {
              this.$message.error('上传文件只能是 JPG/PNG/GIF 格式!');
              return false;
          }

          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isLt2M) {
              this.$message.error('上传文件大小不能超过 2MB!');
              return false;
          }

        },

      handleUploadClick() {
          this.dialogVisible = true;
      },

      handleDialogClose() {
          // 关闭对话框后重新加载图片列表数据
          this.$refs.imageList.fetchImageData();
      }
  }
}
</script>

 